<template>
  <div class="app-container">
    <el-card shadow="never">
      <div class="header">
        <el-page-header @back="goBack" content="商品审核详情" />
      </div>

      <el-tabs v-model="activeTab">
        <h3 class="section-title">基本信息</h3>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="info-item">
              <label>商品分类：</label>
              <span>{{ form.categoryName }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="info-item">
              <label>商品名称：</label>
              <span>{{ form.productName }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="info-item">
              <label>商品卖点：</label>
              <span>{{ form.sellingPoint }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="info-item">
              <label>商品编号：</label>
              <span>{{ form.productSn }}</span>
            </div>
          </el-col>
        </el-row>

        <el-col :span="24">
          <div class="info-item">
            <label>商品参数：</label>
            <span v-html="form.productParams" class="product-specs"></span>
          </div>
        </el-col>

        <el-col :span="24">
          <div class="info-item">
            <label>商品详情：</label>
            <span v-html="form.description" class="product-specs"></span>
          </div>
        </el-col>

        <h2 class="section-title">商品信息</h2>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="info-item">
              <label>计量单位：</label>
              <span>{{ form.productUnit }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <label>销售模式：</label>
              <el-tag :type="form.salesModel === 'retail' ? 'warning' : 'info'">
                {{ form.salesModel === 'retail' ? '零售' : '批发' }}
              </el-tag>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <label>销售价格：</label>
              <span>¥{{ form.price }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <label>成本价格：</label>
              <span>¥{{ form.costPrice }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <label>市场价：</label>
              <span>¥{{ form.originalPrice }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <label>库存：</label>
              <span>{{ form.stock }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <label>已售数量：</label>
              <span>{{ form.soldNum }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <label>商品重量：</label>
              <span>{{ form.weight }}kg</span>
            </div>
          </el-col>
        </el-row>

        <h2 class="section-title">商品规格及图片</h2>
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="info-item">
              <label>商品规格：</label>
              <span v-html="form.specs" class="product-specs"></span>
            </div>
          </el-col>
        </el-row>

        <h2 class="section-title">商品详情描述</h2>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="info-item">
              <label>商品卖点：</label>
              <span>{{ form.sellingPoint }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="info-item">
              <label>商品描述：</label>
              <span>{{ form.description }}</span>
            </div>
          </el-col>
        </el-row>

        <el-divider content-position="left">商品图片</el-divider>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-image
                style="width: 200px; height: 200px; margin-right: 10px;"
                :src="form.mainImage"
                :preview-src-list="[form.mainImage]"
                fit="cover"
            />
          </el-col>
        </el-row>


        <el-divider content-position="left" v-if="form.imageGallery">商品相册</el-divider>
        <el-row :gutter="20" v-if="form.imageGallery">
          <el-col :span="24">
            <div class="image-gallery">
              <el-image
                  v-for="(img, index) in form.imageGallery.split(',')"
                  :key="index"
                  style="width: 120px; height: 120px; margin-right: 10px;"
                  :src="img"
                  :preview-src-list="form.imageGallery.split(',')"
                  fit="cover"
              />
            </div>
          </el-col>
        </el-row>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getApproval } from '@/api/shangpin/approval'

const route = useRoute()
const router = useRouter()

const activeTab = ref('basic')
const form = ref({
  id: null,
  productName: '',
  productSn: '',
  productUnit: '',
  description: '',
  sellingPoint: '',
  price: 0,
  costPrice: 0,
  originalPrice: 0,
  stock: 0,
  soldNum: 0,
  weight: 0,
  mainImage: '',
  imageGallery: '',
  status: 0,
  categoryName: '',
  salesModel: '',
  productParams: '',
  specs: ''
})

// 获取商品详情
const getDetail = () => {
  const id = route.query.id || route.params.id
  getApproval(id).then(response => {
    form.value = response.data
  })
}

// 返回上一页
const goBack = () => {
  router.go(-1)
}

onMounted(() => {
  getDetail()
})
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.info-item {
  margin-bottom: 15px;
  line-height: 32px;
  font-size: 14px;
}

.info-item label {
  font-weight: bold;
  color: #606266;
  min-width: 100px;
  display: inline-block;
}

.info-item span {
  color: #303133;
}

.product-params,
.product-detail,
.product-specs {
  padding: 10px;
  margin-left: -10px;
  background-color: #f5f7fa;
  border-radius: 4px;
  font-size: 14px;
}

.image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}


.section-title {
  font-size: 20px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #409eff;
}
</style>